<template>
  <div class="ivu-extend">
    <Dropdown trigger="click" @on-click="changeTableSize">
      <Tooltip placement="top" content="密度">  
        <Icon size="18" type="md-list"/>
      </Tooltip>
      <DropdownMenu slot="list">
          <DropdownItem name="default" :selected="tableSize=='default'">默认</DropdownItem>
          <DropdownItem name="large" :selected="tableSize=='large'">宽松</DropdownItem>
          <DropdownItem name="small" :selected="tableSize=='small'">紧凑</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Tooltip placement="top" :content="fullScreen?'退出全屏':'全屏'">  
      <Icon :type="fullScreen?'md-contract':'md-expand'" size="18" @click="toggleFullScreen" />
    </Tooltip>
    <Dropdown class="col_set" trigger="custom" :visible="visible" @on-clickoutside="visible = false" >
      <Tooltip placement="top" content="列设置">  
        <Icon size="18" type="md-options" @click="visible =! visible"/>
      </Tooltip>
      <DropdownMenu slot="list">
        <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
          <DropdownItem v-for="(item,index) in columnsShowLabel" :key="`extend-drop-${index}`"><Checkbox :disabled="tableColumnsChecked.includes(item)&&tableColumnsChecked.length<=1" :label="item">&nbsp;{{item}}</Checkbox></DropdownItem>
        </Checkbox-group>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: "TableExtend",
  data() {
      return {
        tableSize: 'default',
        fullScreen: false,
        visible: false,
        columnsShowLabel: [],
        tableColumnsChecked: [],
        filterColumns: {}
      }
  },
  props: [ 'columns', 'queryParams' ],
  watch: {
  },
  created() {
    this.columns.reduce((arr,item)=>{ if(item.title.trim()&&item.title!='操作'){arr.push(item.title)} return arr },this.columnsShowLabel);
    this.tableColumnsChecked = this.columnsShowLabel;
    this.columns.map(item=>{
      this.filterColumns[item.title||true] = item;
    })
  },
  methods: {
    changeTableSize(data){
      this.tableSize = data;
      this.$emit('changeTableSize', data)
    },
    toggleFullScreen() {
      let fullarea = document.querySelector('.ivu-card.ivu-card-dis-hover')
      if (this.fullScreen) {    // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 进入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      this.fullScreen = !this.fullScreen;
    },
    changeTableColumns() {
      let data=[{
          title: "",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("span", params.index + (this.queryParams.pageNo - 1) * this.queryParams.pageSize + 1);
          }
        }];
      for(let i in this.filterColumns){
        this.tableColumnsChecked.includes(i) && data.push(this.filterColumns[i]);
      }
      this.$emit('changeTableColumns', data)
    }
  }
};
</script>

<style lang="less" scoped>
.ivu-extend {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  > * {
    padding: 0 6px;
    .ivu-icon {
      cursor: pointer;
    }
  }
  .col_set .ivu-dropdown-item {
    padding: 0;
    label {
      padding: 7px 16px;
      width: 100%;
      height: 100%;
      margin-right: 0;
    }
  }
}
</style>